<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="120px" @keyup.enter.native="enterSearch">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input :name="portName" v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型">
                        <auto-search-entrust v-model="condition['search_LIKE_containerType']"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸">
                        <auto-search-size v-model="condition['search_LIKE_containerSize']"></auto-search-size>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port :name="portName" v-model="condition['search_EQ_portCode']"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间起">
                        <el-date-picker v-model="condition['search_GTE_createDateTime']"
                                        :picker-options="startPickerOptions" type="date"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间止">
                        <el-date-picker v-model="condition['search_LTE_createDateTime']" @change="handleChangeEnd"
                                        :picker-options="endPickerOptions" type="date"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="内外贸">
                        <el-select v-model="condition['search_EQ_tradeType']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否装船">
                        <el-select v-model="condition['search_EQ_isLoad']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态">
                        <el-select v-model="condition['search_EQ_planStatus']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictOperationState" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="核对日期起">
                        <el-date-picker v-model="condition['search_GTE_checkTime']"
                                        type="datetime" placeholder="起始日期"
                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="核对日期止">
                        <el-date-picker v-model="condition['search_LTE_checkTime']"
                                        type="datetime" placeholder="结束日期"
                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" class="ml-120" @click="loadData">查 询</el-button>
                    <!--<el-button @click="handleAdd">新 增</el-button>-->
                    <el-button @click="handleExport">导出Excel</el-button>
                    <el-button @click="printClick">打印装箱报告</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="mt-10 ">
            <el-col :span="8" style="display: flex;justify-content: space-between">
                <title-point color="#30C8CA">
                    <div slot="content">
                        总箱量 :
                        <span style="font-size: 16px">{{ totalNum }}</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        已完成 :
                        <span style="font-size: 16px">{{ job }}</span></div>
                </title-point>
                <title-point color="#50B155">
                    <div slot="content">
                        未完成 :
                        <span style="font-size: 16px">{{ noJob }}</span></div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="list" ref="multipleTable" @selection-change="handleSelectionChange" border stripe
                  max-height="500" class="mt-10">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column prop="containerId" label="箱号" fixed="left"  min-width="120">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleDetail(scope.row)">
                        {{ scope.row.containerId }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号"  width="55"></el-table-column>
            <el-table-column prop="portName" label="作业港口" min-width="120"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号" min-width="120"></el-table-column>
            <el-table-column prop="finishTime" label="完成日期"  min-width="140">
                <template slot-scope="scope">
                    {{ scope.row.finishTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column prop="isFinish" label="是否完成" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.isFinish | _filterTrueOrFalse }}
                </template>
            </el-table-column>
            <el-table-column prop="isLoad" label="是否装船" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.isLoad | _filterTrueOrFalse }}
                </template>
            </el-table-column>
            <el-table-column prop="cargoName" label="货名" min-width="100"></el-table-column>
            <el-table-column prop="packing" label="包装" min-width="100"></el-table-column>
            <el-table-column prop="cargoCount" label="件数" min-width="80"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重" min-width="80"></el-table-column>
            <el-table-column prop="remark" label="描述" show-overflow-tooltip min-width="120"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代" min-width="120"></el-table-column>
            <el-table-column prop="startUser" label="开始人" min-width="120"></el-table-column>
            <el-table-column prop="startTime" label="开始时间"  min-width="160"></el-table-column>
            <el-table-column prop="finishUser" label="完成人" min-width="120"></el-table-column>
            <el-table-column prop="finishTime" label="完成时间"  min-width="160"></el-table-column>
            <el-table-column prop="createDateTime" label="创建时间"  min-width="160"></el-table-column>
        </el-table>
        <el-row class="bottom" type="flex" v-show="total>0">
            <div class="oper">

            </div>
            <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr"
                           :page-size="pageInfo.iDisplayLength" :total="total">
            </el-pagination>
        </el-row>
        <load-detail-form v-if="dialogForm" ref="loadDetailForm"></load-detail-form>
    </div>
</template>

<script>
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import { getPlanList, getPlanId, deletePlanList } from '@/api/planList/planList.js'
    import titlePoint from '../common/title-point'
    import loadDetailForm from '../shipPlan/loadDetailForm'
    import selectPort from '@/components/select/selectPort'
    import { newExportExcel } from "@/utils/newExport";
    import { tradeType, trueOrFalse, portCode } from "../../../assets/dict";
    import { preview } from "@/api/attachment/attachment";

    export default {
        name: "装箱理货",
        components: {
            autoSearchPortStation,
            autoSearchEntrust,
            autoSearchSize,
            autoSearchCustom,
            titlePoint,
            selectPort,
            loadDetailForm
        },
        data() {
            return {
                condition: {},
                list: [],
                total: 0,
                pageInfo: this.$defalutPage(),
                listLoading: false,
                dialogForm: false,
                totalNum: 0,
                job: 0,
                noJob: 0,
                jobTeu: 0,
                noJobteu: 0,
                created: true,
                portName: '',
            }
        },
        mounted() {
            const condition = JSON.parse(sessionStorage.getItem('ctIndex'))
            this.condition = { ...condition }
            const SHIP_DATE = sessionStorage.getItem('SHIP_DATE')
            this.portName = portCode.get(this.condition.search_EQ_portCode)
            if (SHIP_DATE) {
                this.$set(this.condition, 'search_GTE_createDateTime', SHIP_DATE + ' 00:00:00')
                this.$set(this.condition, 'search_LTE_createDateTime', SHIP_DATE + ' 23:59:59')
                // this.condition['search_GTE_createDateTime'] = SHIP_DATE + ' 00:00:00'
                // this.condition['search_LTE_createDateTime'] = SHIP_DATE + ' 23:59:59'
            }
            this.$set(this.condition, 'search_EQ_planStatus', 'FOUR')
            this.loadData()
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        methods: {
            handleSelectId(val) {
                this.condition.search_EQ_shipAgentId = val
            },
            loadData() {
                this.listLoading = true
                /*this.$set(this.condition, 'search_EQ_isCheck', true)*/
                let params = this.$assist.copySearchConditions(this.condition)
                console.info(params,'查询条件')
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = this.pageInfo.iDisplayLength
                params.sortType = '-createDateTime'
                params.search_EQ_type = 'ZX'
                getPlanList(params).then(res => {
                    this.created = false
                    const data = res.data
                    this.jobTeu = data.jobTeu
                    this.noJobteu = data.noJobteu
                    this.total = data.data.iTotalRecords
                    this.listLoading = false
                    this.list = data.data.aaData
                    this.totalNum = data.totleNum
                    this.job = data.job
                    this.noJob = data.noJob

                    this.worked = 0
                    this.noWork = 0
                    this.list.forEach(f => {
                        if (f.isFinish === true) {
                            this.worked = this.worked + 1
                        }
                        if (f.isFinish === false) {
                            this.noWork = this.noWork + 1
                        }
                    })
                })
            },
            enterSearch() {
                this.loadData()
            },
            // 查看详情
            handleDetail(item) {
                getPlanId(item.planId).then(res => {
                    this.dialogForm = true
                    this.$nextTick(() => {
                        this.$refs.loadDetailForm.dialogForm = true
                        let form = JSON.parse(JSON.stringify(res.data))
                        delete form.records
                        if (form.attachments != null && form.attachments.length > 0){
                            form.attachments.forEach(item => {
                                preview(item.id).then(res => {
                                    let url = res.data
                                    let strUrl = res.data.substr(0, url.length - 2)
                                    item.viewPath = strUrl.substr(url.indexOf('=') + 1, strUrl.length)
                                }).catch(err =>{
                                    item.viewPath = 'http://img10.360buyimg.com/n1/jfs/t17479/331/463860348/54829/98c31e6d/5a7bb620N7ca92f1c.jpg'
                                })
                            })
                        }
                        this.$refs.loadDetailForm.form = form
                        this.$refs.loadDetailForm.accountWay = form.accountWay
                        this.$refs.loadDetailForm.accountUnit = form.accountUnit
                        this.$refs.loadDetailForm.isShowByLoad = false
                        this.$refs.loadDetailForm.table = res.data.records
                    })
                })
            },
            handleChangeEnd(val) {
                let setVal = val;
                if (val) {
                    setVal = val.split(" ")[0] + " 23:59:59";
                }
                this.condition["search_LTE_createDateTime"] = setVal;
            },
            handleExport() {
                let map = new Map();
                map.set("portName", "作业港口")
                map.set("containerId", "箱号")
                map.set("containerSize", "尺寸")
                map.set("containerType", "箱型")
                map.set("tradeType", "内外贸")
                map.set("sealNo", "铅封号")
                map.set("finishTime", "完成日期")
                map.set("isFinish", "是否完成")
                map.set("isLoad", "是否装船")
                map.set("cargoName", "货名")
                map.set("packing", "包装")
                map.set("cargoCount", "件数")
                map.set("cargoWeight", "货重")
                map.set("remark", "描述")
                map.set("shipAgentName", "船代")
                map.set("startUser", "开始人")
                map.set("startTime", "开始时间")
                map.set("finishUser", "完成人")
                map.set("finishTime", "完成时间")
                map.set("createDateTime", "创建时间")
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = 9999
                params.sortType = '-createDateTime'
                params.search_EQ_planType = 'ZX'
                getPlanList(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            if (key === "isFinish") {
                                record[key] = trueOrFalse.get(record[key]);
                            }
                            if (key === "isLoad") {
                                record[key] = trueOrFalse.get(record[key]);
                            }
                            if (key === 'finishTime') {
                                record[key] = record[key] ? record[key].substr(0, 10) : '-'
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("装箱查询", exportRecords);
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            printClick() {
                if(typeof (this.multipleSelection) === 'undefined' && this.list.length === 0) return
                if(this.condition['search_EQ_planStatus'] !== 'THREE'){
                    this.$message({ message: '请选择作业状态为已完成后查询', type: 'warning' })
                    return
                }
                if(typeof (this.multipleSelection) === 'undefined'){
                    localStorage.setItem('dts',JSON.stringify(this.list))
                }else{
                    localStorage.setItem('dts',JSON.stringify(this.multipleSelection))
                }
                const origin = window.location.origin + window.location.pathname
                const route = "#/OnPortPrint/3203631"
                window.open(`${origin}${route}`);
            },

        },
        watch: {
            pageInfo: {
                deep: true,
                handler: function () {
                    this.loadData()
                }
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_createDateTime"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_createDateTime"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        }
    }
</script>

<style scoped>
    .bottom {
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
        align-items: center;
    }

    .operbar {
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
    }
</style>
